<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<canvas id="canvas" spellcheck="width: 800px; height: 800px;"></canvas>
<script src="assets/lib/jquery-1.11.3.min.js"></script>
<script>
    var canvas = $("#canvas")[0];
    canvas.width = 800;
    canvas.height = 800;

    var WIDTH = 800, HEIGHT = 800;

    var RADIUS = 200; var width = 20;


    var ctx = canvas.getContext("2d");

    var percent = 50;
    var PI = Math.PI;

    var min = 45;
    var max = 45 + percent;

    drawCircle(RADIUS, "#ff00ff");

    drawMinLine();


    function drawMinLine(){
        for(var i = 0; i < 120; i++){


            var deg = i * 3;
            if(deg >= min && deg <= max){

            }else {
                ctx.save();
                ctx.translate(WIDTH/2, HEIGHT/2);
                ctx.rotate(3 * i * Math.PI / 180);
                ctx.beginPath();
                ctx.strokeStyle = "#01BBBA";
                ctx.lineWidth = 2;
                width = 20;
                ctx.moveTo(0, RADIUS);
                ctx.lineTo(0, RADIUS + width);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
        }
    }


    function drawCircle(r, fill){
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = width;
        ctx.strokeStyle = fill;
        ctx.arc(WIDTH/2, HEIGHT/2, r+width/2, PI/2+min*PI/180, PI/2+max*PI/180, false);
        ctx.stroke();
        ctx.restore();
    }
</script>

</body>
</html>